<nzi-form [formName]="domainForm">
  <form nz-form [formGroup]="domainForm">
    <!-- 添加防CSRF验证字段 -->
    <input type="hidden" formControlName="timestamp" />
    <input type="hidden" formControlName="nonce" />
    <nz-alert nzMessage="自定义域名需要解析到函数计算所在的 Endpoint，请设置自定义域名的 CNAME 解析到：{{invokeHost}}" class="alert-bar" nzType="info">
  </nz-alert>
    <!-- 自定义域名名称 -->
    <nz-form-item>
      <nz-form-label nzFor="domainName" >自定义域名名称<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <input nz-input placeholder="请输入自定义域名名称" formControlName="domainName">
        <nz-form-explain class="from-help help-text">
          请输入不包含请求协议的完整URL
        </nz-form-explain>
        <!-- <ng-container
          *ngIf="domainForm.get('domainName') && domainForm.get('domainName').dirty && domainForm.get('domainName').errors">
          <nz-form-explain class="from-help input-group" *ngIf="domainForm.get('domainName').hasError('duplicated')">
            域名名称已经存在
          </nz-form-explain>
          <nz-form-explain class="from-help input-group" *ngIf="domainForm.get('domainName').hasError('required')">
            自定义域名不能为空
          </nz-form-explain>
          <nz-form-explain class="from-help input-group" *ngIf="domainForm.get('domainName').hasError('pattern')">
            请输入不包含请求协议的完整URL
          </nz-form-explain>
        </ng-container> -->
      </nz-form-control>
    </nz-form-item>
   
    <!-- 支持协议 -->
    <nz-form-item>
      <nz-form-label nzFor="protocol" >支持协议<span class="required-icon">*</span></nz-form-label>
      <nz-form-control>
        <nz-radio-group formControlName="protocol" (ngModelChange)="protocolChange($event)">
          <label nz-radio-button nzValue="HTTP">HTTP</label>
          <label nz-radio-button nzValue="HTTP,HTTPS">HTTP,HTTPS</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
    <!-- 证书配置 -->
    <ng-container *ngIf="enableHttps">
      <nz-form-item>
        <nz-form-label nzFor="certName">证书名称<span class="required-icon">*</span></nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="请输入证书名称" formControlName="certName" maxlength="255">
          <ng-container
            *ngIf="domainForm.get('certName') && domainForm.get('certName').dirty && domainForm.get('certName').errors">
            <!-- <nz-form-explain class="from-help input-group" *ngIf="domainForm.get('certName').hasError('required')">
              证书名称不能为空
            </nz-form-explain> -->
            <nz-form-explain class="from-help input-group" *ngIf="domainForm.get('certName').hasError('pattern')">
              只能包含字母、数字、下划线和中划线，且只能以字母、下划线开头
            </nz-form-explain>
          </ng-container>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="certCertificate">证书<span class="required-icon">*</span></nz-form-label>
        <nz-form-control>
          <textarea nz-input rows="4" maxlength="20480" formControlName="certCertificate"
            placeholder="请输入 PEM 格式证书，最长 20480 字符"></textarea>
          <!-- <ng-container
            *ngIf="domainForm.get('certCertificate') && domainForm.get('certCertificate').dirty && domainForm.get('certCertificate').errors">
            <nz-form-explain class="from-help input-group"
              *ngIf="domainForm.get('certCertificate').hasError('required')">
              证书不能为空
            </nz-form-explain>
          </ng-container> -->
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="certKey">私钥<span class="required-icon">*</span></nz-form-label>
        <nz-form-control>
          <textarea nz-input rows="4" maxlength="4096" formControlName="certKey"
            placeholder="请输入 PEM 格式私钥，最长 4096 字符"></textarea>
          <!-- <ng-container
            *ngIf="domainForm.get('certKey') && domainForm.get('certKey').dirty && domainForm.get('certKey').errors">
            <nz-form-explain class="from-help input-group" *ngIf="domainForm.get('certKey').hasError('required')">
              私钥不能为空
            </nz-form-explain>
          </ng-container> -->
        </nz-form-control>
      </nz-form-item>
    </ng-container>

    <!-- 路由设置 -->
    <nz-form-item>
      <nz-form-label nzFor="routeConfig">路由设置</nz-form-label>
      <div class="form-control-table-wrapper">
        <nz-table #nzTable [nzData]="['']" nzShowPagination="false" [nzLoading]="tableLoading">
          <thead>
            <tr>
              <th>路径<span class="required-icon">*</span><i class="anticon anticon-question-circle-o"
                  style="margin-left: 0.04rem;" nz-popover nzContent="基于以 / 分隔的 URL 路径前缀匹配。匹配区分大小写。"></i></th>
              <th>应用<span class="required-icon">*</span></th>
              <th>函数<span class="required-icon">*</span></th>
              <th>版本/别名<span class="required-icon">*</span></th>
              <th [nzWidth]="'40px'">操作</th>
            </tr>
          </thead>
          <tbody>
            <ng-container formArrayName="routeConfig" *ngFor="let control of routeConfig.controls; let i = index;">
              <tr [formGroupName]="i">
                <td>
                  <nz-form-control style="padding-left: 0;">
                    <input nz-input formControlName="path" placeholder="请输入路径" (ngModelChange)="pathChange(i, $event)">
                    <ng-container
                      *ngIf="control.get('path') && control.get('path').dirty && control.get('path').errors">
                      <nz-form-explain class="from-help input-group table-help"
                        *ngIf="!control.get('path').hasError('exist') && control.get('path').hasError('required')">
                        路径不能为空
                      </nz-form-explain>
                      <nz-form-explain class="from-help input-group table-help"
                        *ngIf="!control.get('path').hasError('exist') && control.get('path').hasError('pattern')">
                        只能以 / 开头
                      </nz-form-explain>
                      <nz-form-explain class="from-help input-group table-help"
                        *ngIf="control.get('path').hasError('exist')">
                        路径不能重复
                      </nz-form-explain>
                    </ng-container>
                  </nz-form-control>
                </td>
                <td>
                  <nz-form-control style="padding-left: 0;">
                    <nz-select formControlName="group" nzShowSearch nzPlaceHolder="请选择应用" nzNotFoundContent="没有可用的应用"
                      (ngModelChange)="groupChange(i, $event)">
                      <nz-option *ngFor="let object of groupDiaplayNameList" [nzLabel]="object.key"
                        [nzValue]="object.value">
                      </nz-option>
                    </nz-select>
                    <!-- <ng-container
                      *ngIf="control.get('group') && control.get('group').dirty && control.get('group').errors">
                      <nz-form-explain class="from-help input-group table-help"
                        *ngIf="control.get('group').hasError('required')">
                        应用不能为空
                      </nz-form-explain>
                    </ng-container> -->
                  </nz-form-control>
                </td>
                <td>
                  <nz-form-control style="padding-left: 0;">
                    <nz-select formControlName="function" nzShowSearch nzPlaceHolder="请选择函数" nzNotFoundContent="没有可用的函数"
                      (ngModelChange)="functionChange(i, $event)">
                      <nz-option *ngFor="let object of routeConfigList[i].functionList" [nzLabel]="object"
                        [nzValue]="object">
                      </nz-option>
                    </nz-select>
                    <!-- <ng-container
                      *ngIf="control.get('function') && control.get('function').dirty && control.get('function').errors">
                      <nz-form-explain class="from-help input-group table-help"
                        *ngIf="control.get('function').hasError('required')">
                        函数不能为空
                      </nz-form-explain>
                    </ng-container> -->
                  </nz-form-control>
                </td>
                <td>
                  <nz-form-control style="padding-left: 0;">
                    <nz-select formControlName="version" nzShowSearch nzPlaceHolder="请选择版本/别名"
                      nzNotFoundContent="没有可用的版本/别名" (ngModelChange)="versionChange(i, $event)">
                      <nz-option *ngFor="let object of routeConfigList[i].versionList" [nzLabel]="object.key"
                        [nzValue]="object.value">
                      </nz-option>
                    </nz-select>
                    <!-- <ng-container
                      *ngIf="control.get('version') && control.get('version').dirty && control.get('version').errors">
                      <nz-form-explain class="from-help input-group table-help"
                        *ngIf="control.get('version').hasError('required')">
                        版本不能为空
                      </nz-form-explain>
                    </ng-container> -->
                  </nz-form-control>
                </td>
                <td>
                  <a (click)="removeRouteConfig(i)" *ngIf="!(i == routeConfig.length - 1)">删除</a>
                </td>
              </tr>
            </ng-container>
          </tbody>
        </nz-table>
        <p class="help-text" style="padding-left: 0;">自定义域名只能绑定 HTTP 触发器，请先创建 HTTP 触发器函数，再设置路由。</p>
      </div>
    </nz-form-item>

  </form>
</nzi-form>
